<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <!-- 引入样式 -->
    <link rel="stylesheet" href="../plugins/elementui/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/style.css">
    <style type="text/css">

        #l-map{height:360px;width:100%;}

    </style>


    <script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=ECm5Y1jUTQmbHfQudG33S2HhWzAEW5M7"></script>


    <title>添加地址</title>

</head>
<body>
        <div id="app">
                <el-row>
                    <!--查询输入框-->
                    <el-col :span="12">
                        <el-input id="suggestId" v-model="formData.position" :rules="rules"/>
                    </el-col>

                    <el-col :span="12">
                    <el-button type="primary" @click="handleCreate()">确定</el-button>
                    </el-col>
                </el-row>
        </div>

        <div id="l-map"></div>
        <div id="searchResultPanel" style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
</body>


<!-- 引入组件库 -->
<script src="../js/vue.js"></script>
<script src="../plugins/elementui/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script type="text/javascript">
    // 百度地图API功能
    function G(id) {
        return document.getElementById(id);
    }

    var map = new BMap.Map("l-map");
    map.centerAndZoom("武汉",12);                   // 初始化地图,设置城市和地图级别。

    var ac = new BMap.Autocomplete(    //建立一个自动完成的对象
        {"input" : "suggestId"
            ,"location" : map
        });

    ac.addEventListener("onhighlight", function(e) {  //鼠标放在下拉列表上的事件
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str = "FromItem<br />index = " + e.fromitem.index + "<br />value = " + value;

        value = "";
        if (e.toitem.index > -1) {
            _value = e.toitem.value;
            value = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        }
        str += "<br />ToItem<br />index = " + e.toitem.index + "<br />value = " + value;
        G("searchResultPanel").innerHTML = str;
    });

    var myValue;
    ac.addEventListener("onconfirm", function(e) {    //鼠标点击下拉列表后的事件
        var _value = e.item.value;
        myValue = _value.province +  _value.city +  _value.district +  _value.street +  _value.business;
        G("searchResultPanel").innerHTML ="onconfirm<br />index = " + e.item.index + "<br />myValue = " + myValue;

        setPlace();
    });

    var longitude = null;  //经度
    var latitude = null;    //纬度

    function setPlace(){
        map.clearOverlays();    //清除地图上所有覆盖物
        function myFun(){
            var pp = local.getResults().getPoi(0).point;    //获取第一个智能搜索的结果
            map.centerAndZoom(pp, 18);
            map.addOverlay(new BMap.Marker(pp));    //添加标注

            console.log(map); //打印日志信息 包含的有经纬度坐标
            longitude = map.Oe.lng; //经度
            latitude = map.Oe.lat;  //纬度
            //alert(longitude);
            //alert(latitude);
        }
        var local = new BMap.LocalSearch(map, { //智能搜索
            onSearchComplete: myFun
        });
        local.search(myValue);

        console.log(local);//打印日志信息 包含中文地址
        //position = local.ab;
        //alert(position);
    }
</script>
<script>

    var vue = new Vue({
        el: '#app',
        data:{
            formData: {},//表单数据
            rules: {//校验规则
                position: [{ required: true, message: '地址为必填项', trigger: 'blur' }],
            }
        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {

        },
        methods:{
            // 重置表单
            resetForm() {
                //每次点击新建按钮，弹出来的窗口都是新的，不带上次的数据
                this.formData = {}; //重置数据
            },
            //点击确认添加按钮
            handleCreate(){

                var address_value = $("#suggestId").val();//获取中文地址

                // alert(longitude);
                // alert(latitude);    //弹一下坐标

                //将经度和纬度封装到formData中
                this.formData.longitude = longitude;
                this.formData.latitude = latitude;
                this.formData.position = address_value;
                //console.log(this.formData);


                //判断输入框是否有值，如果有可以添加数据
                if (address_value) {
                    //调用handleAdd方法，添加坐标信息到数据库
                    this.handleAddAddress();
                }

                //在最后重置表单，然后重新调用分页查询


            },
            //添加
            handleAddAddress () {
                //this.formData.longitude = this.longitude;
                //进行表单校验
                axios.post("/address/addAddress.do",this.formData).then((res) => {
                    //关闭新增窗口
                    this.dialogFormVisible = false;
                    if(res.data.flag){//执行成功
                        //弹出提示信息
                        this.$message({
                            message:res.data.message,
                            type:'success'
                        });
                        //添加成功关闭弹窗
                        parent.vue.dialogFormVisible = false;
                        parent.vue.findPage();
                        //顺便重置一下表单
                        this.resetForm();

                    }else{//执行失败
                        //弹出提示
                        this.$message.error(res.data.message);
                    }
                })
            }
        }
    });
</script>



</html>